<template>
<div style="padding: 10px">
  <div v-for="item in videos" :key="item.id" style="margin: 10px 0;padding: 10px 0;color: #666;">
  <el-card>
      <span >{{item.name}}</span>
      <span style="font-size: 12px;margin-top:5px;padding-left: 10px">({{item.size}}) kb</span>
      <span class="item" style="float:right;cursor: pointer" @click="detail(item.id)">播放</span>
  </el-card>
  </div>
</div>
</template>



<script>


export default {
  name: "Item1",
  data(){
    return{
      videos:[]
    }
  },
  created() {
      this.request("/file/getAll").then(res=>{
        console.log(res.data)
        this.videos=res.data.filter(v=>v.type==='mp4')
        console.log(this.videos)
      })
  },
  mounted() {

  },
  methods:{
    detail(id){
      this.$router.push({path:"/front/detail",query:{id:id}})
    }
  }
}
</script>

<style >
.item:hover{
  color: #409EFF;

}
</style>